<template>
  <div class="app-container">
    <div class="app-container-content dictionary">
      <!-- 操作区域 -->
      <div class="btn">
        <div class="left">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click.native="handleAdd()">新增</el-button>
          <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDel(selectList)">批量删除</el-button> -->
        </div>
      </div>
      <div ref="tablebox" class="tablebox">
        <el-table :data="tableData" border style="width: 100%" @select="handleSelectList" @sort-change="handleSortChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" align="center" width="55" />
          <el-table-column prop="typeName" label="类型名称" />
          <el-table-column prop="typeCode" label="类型编码" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="value" label="值" />
          <el-table-column prop="editable" label="可编辑的" width="80">
            <template slot-scope="{row}">{{row.editable == 1 ? '是' : '否'}}</template>
          </el-table-column>
          <el-table-column prop="describes" label="描述" />
          <el-table-column label="操作" width="240px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" :disabled="scope.row.editable == 0" type="success" @click="handleAdd(scope.row)">编辑</el-button>
              <el-button size="mini" :disabled="scope.row.editable == 0" type="danger" @click="handleDel([scope.row.id])">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageCondition.total"
        :page-sizes="[5, 10, 15, 30, 50, 100]"
        :page-size="pageCondition.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 新增谈出窗口 -->
      <el-dialog :title="handleType" :visible.sync="addDialogShow" width="450px" :before-close="handleClose" :close-on-click-modal="false">
        <div v-if="addDialogShow" class="dialog-content">
          <el-form ref="from" :rules="rules" label-width="70px" :model="dictionaryForm">
            <el-form-item prop="typeName" label="类型名称">
              <el-input v-model="dictionaryForm.typeName" />
            </el-form-item>
            <el-form-item prop="typeCode" label="类型编码">
              <el-input v-model="dictionaryForm.typeCode" />
            </el-form-item>
            <el-form-item prop="label" label="名称">
              <el-input v-model="dictionaryForm.label" />
            </el-form-item>
            <el-form-item prop="value" label="值">
              <el-input v-model="dictionaryForm.value" />
            </el-form-item>
            <el-form-item prop="editable" label="可编辑的">
              <el-radio v-model="dictionaryForm.editable" :label="1">是</el-radio>
              <el-radio v-model="dictionaryForm.editable" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item prop="describes" label="描述">
              <el-input type="textarea" v-model="dictionaryForm.describes" :rows="3" />
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer">
          <el-button type="primary" @click="onSubmit('from')">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dictionaryApi from "@/api/system/dictionary";
export default {
  filters: {},
  data() {
    return {
      rules: {
        // 校验方法
        key: [{ required: true, message: "键不能为空", trigger: "blur" }],
        label: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
        value: [{ required: true, message: "值不能为空", trigger: "blur" }]
      },
      addDialogShow: false, // 新增弹出框是否显示
      handleType: "新增",
      dictionaryForm: {},
      tableData: [], // 展现表格的数据
      pageCondition: {
        page: 1,
        size: 15,
        sort: "type_code asc",
        total: 0
      }, // 分页条件
      selectList: [] // 多选列表的id
    };
  },
  created() {
    this.listPage();
  },
  methods: {
    listPage: function() {
      dictionaryApi.listPage(this.pageCondition).then(res => {
        this.tableData = res.data.content;
        this.pageCondition.total = parseInt(res.data.totalElements);
      });
    },
    /**
     * 处理服务器端排序
     */
    handleSortChange({ column, prop, order }) {
      // eslint-disable-next-line eqeqeq
      if (order == "descending") {
        this.pageCondition.sort = prop ? prop + " desc" : "status" + " desc";
      } else {
        this.pageCondition.sort = prop ? prop + " asc" : "status" + " asc";
      }
      this.listPage();
    },
    // 每页显示数量调整
    handleSizeChange(val) {
      this.pageCondition.size = val;
      this.listPage();
    },
    // 页面修改
    handleCurrentChange(val) {
      this.pageCondition.page = val;
      this.listPage();
    },
    // 新增按钮---编辑
    handleAdd: function(row) {
      if (row) {
        this.dictionaryForm = { ...row };
        this.handleType = "编辑";
      } else {
        this.dictionaryForm = {};
        this.handleType = "新增";
      }
      this.addDialogShow = true;
    },
    // 新增或修改弹窗内事件
    // 关闭弹窗前执行的事件
    handleClose: function() {
      this.addDialogShow = false;
      this.checkDialogShow = false;
      this.dictionaryForm = {};
    },
    // 点击确认新增或修改
    onSubmit: function(fromName) {
      const $this = this;
      $this.$refs[fromName].validate(valid => {
        const data = { ...$this.dictionaryForm };
        data.roleIds = $this.dictionaryForm.roles;
        delete data.roles;
        if (valid) {
          if ($this.handleType === "新增") {
            dictionaryApi.add(data).then(res => {
              if (res.code === 200 && res.msg === "ok") {
                $this.handleClose();
                $this.$notify({
                  title: "新增成功",
                  message: "该用户已成功录入系统",
                  type: "success"
                });
                $this.listPage();
              } else {
                $this.$notify.error({
                  title: "新增失败",
                  message: "该用户未成功录入系统，请重试"
                });
              }
            });
          } else {
            dictionaryApi.edit(data).then(res => {
              if (res.code === 200 && res.msg === "ok") {
                $this.handleClose();
                $this.$notify({
                  title: "修改成功",
                  message: "该用户修改的信息已成功录入系统",
                  type: "success"
                });
                $this.listPage();
              } else {
                $this.$notify.error({
                  title: "修改失败",
                  message: "未成功修改锁所提交的信息，请重试"
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 多选框事件
    handleSelectList: function(selection, row) {
      this.selectList = selection.map(item => item.id);
    },
    // 删除
    handleDel: function(ids) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        dictionaryApi.deleteByIds({ ids }).then(res => {
          if (res.code === 200 && res.msg === "ok") {
            this.$notify({
              title: "删除成功",
              type: "success"
            });
            this.listPage();
          } else {
            this.$notify.error({
              title: "删除失败"
            });
          }
        });
      });
    }
  }
};
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
.app-container {
  .dictionary {
    background: #fff;
    height: 100%;
    overflow: hidden;
    .btn {
      width: 100%;
      padding: 0 0 16px 0;
      display: flex;
      justify-content: space-between;
      .right {
        max-width: calc(100% - 120px);
        display: flex;
        justify-content: flex-end;
        .el-cascader {
          width: 100%;
        }
      }
    }
    .tablebox {
      overflow: auto;
      margin-bottom: 16px;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
